<template>
  <div>
    <img src="@/assets/img/invite.png" alt="" />
    <section class="linkContent">
      <p>您的推广链接：</p>
      <div>
        <input type="text" disabled class="input" v-model="link" />
        <md-button
          type="primary"
          class="linkBtn"
          ref="copy"
          :data-clipboard-text="link"
          @click="copy"
          id="copy_text"
          >复制链接</md-button
        >
      </div>
      <div>
        <i class="iconfont iconzan"></i>
        <p>
          您已成功推广 <span style="color: #ED7218;">{{ number }}</span> 人
        </p>
      </div>
    </section>
    <section class="copy">
      <p>复制链接，邀请好友</p>
      <div id="qrcode" class="QRCodeStyle" ref="qrcode"></div>
      <div class="copyBtn">
        <div>
          <p><i class="iconfont iconweixinhaoyou"></i></p>
          <p>微信好友</p>
        </div>
        <div @click="QRCodeBtn">
          <p><i class="iconfont iconmorentupianccccccpx"></i></p>
          <p>生成推广二维码</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { Button } from "mand-mobile";
import QRCode from "qrcodejs2";
import Clipboard from "clipboard";
export default {
  name: "login",
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      link: "",
      number: 0
    };
  },
  methods: {
    copy() {
      var clipboard = new Clipboard("#copy_text");

      clipboard.on("success", () => {
        this.$toast.succeed("复制成功！");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        // 不支持复制
        this.$toast.failed("该浏览器不支持自动复制!");
        // 释放内存
        clipboard.destroy();
      });
    },
    QRCodeBtn() {
      new QRCode("qrcode", {
        width: 200,
        height: 200, // 高度
        text: this.link // 二维码内容
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f'
        // foreground: '#ff0'
      });
    }
  },
  mounted() {
    this.$ajax
      .post(this.$api.getInvite)
      .then(res => {
        this.link = res.data.url;
        this.number = res.data.num;
      })
      .catch(err => {
        this.$toast.failed(err);
      });
  }
};
</script>

<style scoped lang="stylus">
img{
  width 100%;
}
.linkContent{
  width 100%;
  background-color #ffffff;
  padding 38px 24px 40px;
  box-sizing border-box;
  margin-top 24px;
}
.linkContent>div:nth-of-type(1){
  display flex;
  margin-top 39px;
  align-items flex-end;
}
.input{
  flex-grow: 1
  border 1px solid #317EB9;
  height: 74px;
  border-radius 16px 0 0 16px;
  padding 0 10px;
  box-sizing border-box
}
.md-field-item-content::before{
  border-bottom  none;
}
.linkBtn{
  font-size 24px;
  color #ffffff;
  background-color #327EB9;
  border-radius:0px 16px 16px 0px;
  width: 160px;
  height: 74px;
}
.md-button.primary::after{
  border none;
}
.linkContent>div:nth-of-type(2){
  display flex;
  margin-top 39px;
  align-items center;
  justify-content center;
}
.linkContent>div:nth-of-type(2)>i{
  font-size 36px;
  color #ED7218;
  margin-right 9px;
}
.linkContent>div:nth-of-type(2)>p{
  font-size 24px;
  color #333333;
  line-height 53px;
}
  .copy{
    background-color #ffffff;
    box-sizing border-box;
    padding 39px 23px 163px;
    margin-top 24px;
  }
.copyBtn{
  display flex;
  margin-top 97px;
  justify-content space-around;
}
.copyBtn>div{
  text-align center;
  font-size 24px;
  color #333333;
  line-height 53px;
}
.copyBtn>div>p:first-child{
  width: 80px;
  height: 80px;
  background-color #ED7218;
  border-radius 50%;
  text-align center;
  line-height 80px;
  margin 0 auto 10px;
}
.copyBtn>div>p:first-child>i{
  font-size 48px;
  color #ffffff;
}
.copyBtn>div:first-child>p:first-child{
  background-color #8BC34A;
}
  #qrcode{
    margin 50px auto 0;
    display flex;
    justify-content center;
  }
</style>
